<template>
  <div id="cont">
    <div>
      <Form ref="engineDetail" :rules="formValidate" :label-width="180" class="tab-detail" :model="engineDetail">
        <Row wrap style="align-items: flex-start;margin-bottom:5px;display:block">
          <Col :lg="8" :xs="24">
          <FormItem prop="image" :label-width="50">
            <div class="detail-image-box">
              <viewer :images="engineDetail.image">
                <img style="width:100%;height:230px;" :src="engineDetail.image" alt="" readonly />
              </viewer>
            </div>
          </FormItem>
          <FormItem label="编号" prop="sn">
            <Input v-model="engineDetail.sn" readonly />
          </FormItem>
          <FormItem label="型号" prop="model">
            <Input v-model="engineDetail.model" readonly />
          </FormItem>
          <FormItem label="供应商" prop="supplier">
            <Input v-model="engineDetail.supplier" readonly />
          </FormItem>
          <FormItem label="发动机类型" prop="engineType">
            <Input v-model="engineDetail.engineType" style="width:100%" readonly />
          </FormItem>

          <FormItem label="燃油类型" prop="fuelType">
            <Input v-model="engineDetail.fuelType" style="width:100%" readonly />
          </FormItem>
          <FormItem label="转速@最高转速点(rpm)" prop="speedAtMaxSpeed">
            <Input type="number" v-model.number="engineDetail.speedAtMaxSpeed" style="width:100%" readonly />
          </FormItem>
          </Col>
          <Col :lg="8" :xs="24">
          <FormItem label="扭矩@最高转速点(Nm)" prop="torqueAtMaxSpeed">
            <Input type="number" v-model.number="engineDetail.torqueAtMaxSpeed" style="width:100%" readonly />
          </FormItem>


          <FormItem label="功率@最高转速点(kW)" prop="powerAtMaxSpeed">
            <Input type="number" v-model.number="engineDetail.powerAtMaxSpeed" style="width:100%" readonly />
          </FormItem>
          <FormItem label="转速@怠速点(rpm)" prop="speedAtIdleSpeed">
            <Input type="number" v-model.number="engineDetail.speedAtIdleSpeed" style="width:100%" readonly />
          </FormItem>
          <FormItem label="扭矩@怠速点(Nm)" prop="torqueAtIdleSpeed">
            <Input type="number" v-model.number="engineDetail.torqueAtIdleSpeed" style="width:100%" readonly />
          </FormItem>
          <FormItem label="功率@怠速点(kW)" prop="powerAtIdleSpeed">
            <Input type="number" v-model.number="engineDetail.powerAtIdleSpeed" style="width:100%" readonly />
          </FormItem>
          <FormItem label="转速@最大扭矩点(rpm)" prop="speedAtMaxTorque">
            <Input type="number" v-model.number="engineDetail.speedAtMaxTorque" style="width:100%" readonly />
          </FormItem>
          <FormItem label="扭矩@最大扭矩点(Nm)" prop="torqueAtMaxTorque">
            <Input type="number" v-model.number="engineDetail.torqueAtMaxTorque" style="width:100%" readonly />
          </FormItem>
          <FormItem label="功率@最大扭矩点(kW)" prop="powerAtMaxTorque">
            <Input type="number" v-model.number="engineDetail.powerAtMaxTorque" style="width:100%" readonly />
          </FormItem>
          <FormItem label="转速@最大功率点(rpm)" prop="speedAtMaxPower">
            <Input type="number" v-model.number="engineDetail.speedAtMaxPower" style="width:100%" readonly />
          </FormItem>
          <FormItem label="扭矩@最大功率点(Nm)" prop="torqueAtMaxPower">
            <Input type="number" v-model.number="engineDetail.torqueAtMaxPower" style="width:100%" readonly />
          </FormItem>
          <FormItem label="功率@最大功率点(kW)" prop="powerAtMaxPower">
            <Input type="number" v-model.number="engineDetail.powerAtMaxPower" style="width:100%" readonly />
          </FormItem>
          </Col>
          <Col :lg="8" :xs="24">
          <FormItem label="重量(kg)" prop="weight">
            <Input type="number" v-model.number="engineDetail.weight" style="width:100%" :max="3000" :min="0"
              readonly />
          </FormItem>
          <FormItem label="发动机排量(L)" prop="displacement">
            <Input type="number" v-model.number="engineDetail.displacement" style="width:100%" :max="200" :min="0"
              readonly />
          </FormItem>

          <FormItem label="增压器类型" prop="boosterType">
            <Input v-model="engineDetail.boosterType" style="width:100%" readonly />
          </FormItem>
          <FormItem label="气缸数" prop="cylinderNumber">
            <Input type="number" v-model.number="engineDetail.cylinderNumber" style="width:100%" :max="50" :min="0"
              readonly />
          </FormItem>
          <FormItem label="冲程数" prop="strokeNumber">
            <Input type="number" v-model.number="engineDetail.strokeNumber" style="width:100%" :max="50" :min="0"
              readonly />
          </FormItem>
          <FormItem label="怠速油耗(g / kWh)" prop="idleBsfc">
            <Input type="number" v-model.number="engineDetail.idleBsfc" style="width:100%" :max="1000" :min="0"
              readonly />
          </FormItem>
          <FormItem label="转动惯量(kg * m ^ 2)" prop="idleSpeedWeight">
            <Input type="number" v-model.number="engineDetail.idleSpeedWeight" style="width:100%" :max="10" :min="0"
              readonly />
          </FormItem>

          <FormItem label="燃料热值(kJ / kg)" prop="heatValue">
            <Input type="number" v-model.number="engineDetail.heatValue" style="width:100%" :max="100000" :min="0"
              readonly />
          </FormItem>
          <FormItem label="燃油密度(kg / m ^ 3)" prop="density">
            <Input type="number" v-model.number="engineDetail.density" style="width:100%" :max="1500" :min="0"
              readonly />
          </FormItem>
          <FormItem :label-width="30">
            其他人是否可见
            <i-switch v-model="engineDetail.isIndexShow" :true-value="1" :false-value="0" disabled />
            其他人是否可用
            <i-switch v-model="engineDetail.otherCanUse" :true-value="1" :false-value="0" disabled />
          </FormItem>
          </Col>
        </Row>
      </Form>
    </div>

    <Collapse v-model="collapseData">
      <Panel name="1">
        外特性曲线
        <div slot="content" style="margin: 30px;">
          <EngCmp :id="id" :isUpdate="isUpdate"></EngCmp>
        </div>
      </Panel>
      <Panel name="2">
        倒拖特性曲线
        <div slot="content" style="margin: 30px;">
          <EngCmp1 :id="id" :isUpdate="isUpdate"></EngCmp1>
        </div>
      </Panel>
      <Panel name="3">
        万有特性曲线
        <div slot="content" style="margin: 30px;">
          <EngCmp2 :id="id" :isUpdate="isUpdate"></EngCmp2>
        </div>
      </Panel>
    </Collapse>
  </div>
</template>
<script>
import { engineApi } from "@/api/engine";
import { engineExternalCharacteristicApi } from "@/api/engine-external-characteristic";
import { engineReverseApi } from "@/api/engine-reverse";
import { engineThousandApi } from "@/api/engine-thousand";
import XLSX, { WorkSheet } from "xlsx";

import EngCmp from "./components/eng-cmp";
import EngCmp1 from "./components/eng-cmp1";
import EngCmp2 from "./components/eng-cmp2";
const PAGE_SIZE_INIT = 20;
export default {
  name: "EnginDetail",
  components: {
    EngCmp, // 外特性曲线
    EngCmp1, // 倒拖特性
    EngCmp2 // 万有
  },
  props: {
    /* id:{type:String} */
  },
  data() {
    return {
      collapseData: ["1", "2", "3"],
      /// ///////////////////////////////////////发动机外特性曲线 start @version2.0//////////////////////////////////////////

      /// ///////////////////////////////////////发动机外特性曲线 end @version2.0//////////////////////////////////////////

      /// ////////////////////万有特性start
      id: null,
      engineThousandModelShow: false, // 万有曲线 显示标识
      engineThousandModel: {
        speed: null,
        torque: null,
        throat: null,
        bsfc: null,
        massFlowRate: null
      },
      engineThousandTableData: [],
      /// ////////////////////万有特性end

      engineDetail: {}, // 发动机详情
      // 外特性曲线
      externalCharacteristicModelShow: false,
      externalCharacteristicModel: {
        speed: null,
        torque: null,
        throat: null,
        power: null
      },
      externalCharacteristicTableData: [],

      // 倒拖特性曲线
      externalReverseCharacteristicModelShow: false,
      externalReverseCharacteristicModel: {
        speed: null,
        torque: null,
        throat: null,
        power: null
      },
      externalReverseCharacteristicTableData: [],
      externalReverseCharacteristicTableSelection: [],
      // 表单验证
      formValidate: {
        // 编号
        sn: [{ required: true, message: "请输入编号", trigger: "change" }],
        // 型号
        model: [{ required: true, message: "请输入型号", trigger: "change" }],

        // 发动机类型
        engineType: [
          { required: true, message: "请输入发动机类型", trigger: "change" }
        ],
        //转速@最高转速点(rpm)
        speedAtMaxSpeed: [{ type: 'number', required: true, message: '请输入转速@最高转速点(rpm)', trigger: 'blur' },
        {
          type: "number",
          min: 0,
          max: 15000,
          message: "请输入0到15000的数字",
          trigger: "blur"
        }
        ],
        //扭矩@最高转速点(Nm)
        torqueAtMaxSpeed: [
          {
            type: "number",
            min: 0,
            max: 5000,
            message: "请输入0到5000的数字",
            trigger: "blur"
          }],
        //功率@最高转速点(kW)
        powerAtMaxSpeed: [
          {
            type: "number",
            min: 0,
            max: 3000,
            message: "请输入0到3000的数字",
            trigger: "blur"
          }],
        //转速@怠速点(rpm)
        speedAtIdleSpeed: [{ type: 'number', required: true, message: '请输入转速@怠速点(rpm)', trigger: 'blur' },
        {
          type: "number",
          min: 0,
          max: 15000,
          message: "请输入0到15000的数字",
          trigger: "blur"
        }],
        //扭矩@怠速点(Nm)
        torqueAtIdleSpeed: [
          {
            type: "number",
            min: 0,
            max: 5000,
            message: "请输入0到5000的数字",
            trigger: "blur"
          }],
        //功率@怠速点(kW)
        powerAtIdleSpeed: [
          {
            type: "number",
            min: 0,
            max: 3000,
            message: "请输入0到3000的数字",
            trigger: "blur"
          }],
        //转速@最大扭矩点(rpm)
        speedAtMaxTorque: [
          {
            type: "number",
            min: 0,
            max: 15000,
            message: "请输入0到15000的数字",
            trigger: "blur"
          }],
        //扭矩@最大扭矩点(Nm)
        torqueAtMaxTorque: [{ type: 'number', required: true, message: '请输入扭矩@最大扭矩点(Nm)', trigger: 'blur' },
        {
          type: "number",
          min: 0,
          max: 5000,
          message: "请输入0到5000的数字",
          trigger: "blur"
        }],
        //功率@最大扭矩点(kW)
        powerAtMaxTorque: [
          {
            type: "number",
            min: 0,
            max: 3000,
            message: "请输入0到3000的数字",
            trigger: "blur"
          }],
        //转速@最大功率点(rpm)
        speedAtMaxPower: [
          {
            type: "number",
            min: 0,
            max: 15000,
            message: "请输入0到15000的数字",
            trigger: "blur"
          }],
        //扭矩@最大功率点(Nm)
        torqueAtMaxPower: [
          {
            type: "number",
            min: 0,
            max: 5000,
            message: "请输入0到5000的数字",
            trigger: "blur"
          }],
        //功率@最大功率点(kW)
        powerAtMaxPower: [{ type: 'number', required: true, message: '请输入功率@最大功率点(kW)', trigger: 'blur' },
        {
          type: "number",
          min: 0,
          max: 3000,
          message: "请输入0到3000的数字",
          trigger: "blur"
        }],
        weight: [
          {
            type: "number",
            min: 0,
            max: 3000,
            message: "请输入0到3000的数字",
            trigger: "change"
          }
        ],
        displacement: [
          {
            type: "number",
            min: 0,
            max: 200,
            message: "请输入0到200的数字",
            trigger: "change"
          }
        ],
        cylinderNumber: [
          {
            type: "number",
            min: 0,
            max: 50,
            message: "请输入0到50的数字",
            trigger: "change"
          }
        ],
        strokeNumber: [
          {
            type: "number",
            min: 0,
            max: 50,
            message: "请输入0到50的数字",
            trigger: "change"
          }
        ],
        idleBsfc: [
          {
            type: "number",
            min: 0,
            max: 1000,
            message: "请输入0到1000的数字",
            trigger: "change"
          }
        ],

        // 转动惯量（曲轴 + 飞轮）(kg * m ^ 2)
        idleSpeedWeight: [
          {
            type: "number",
            required: true,
            message: "请输入转动惯量（曲轴 + 飞轮）(kg * m ^ 2)",
            trigger: "change"
          },
          {
            type: "number",
            min: 0,
            max: 10,
            message: "请输入0到10的数字",
            trigger: "change"
          }
        ],
        heatValueL: [
          {
            type: "number",
            min: 0,
            max: 100000,
            message: "请输入0到100000的数字",
            trigger: "change"
          }
        ],
        density: [
          {
            type: "number",
            min: 0,
            max: 1500,
            message: "请输入0到1500的数字",
            trigger: "change"
          }
        ],
        // 图片
        image: [{ required: true, message: "请上传图片", trigger: "change" }],
        isUpdate: false
      }
    };
  },
  watch: {},
  created() {
    this.id = this.$route.query.id;
    this.fetchEnginDetail();
  },
  mounted() {

    // this.init();

    // 万有引力
    /* this.renderEngineThousandTableDataEchart();

    // 初始化外特性曲线初始化
    this.getEngineExternalCharacteristicTable();

    // 倒拖特性曲线初始化
    this.getRevseEngineExternalCharacteristicTable(); */
  },
  methods: {
    // 导出
    exportXtable() {
      const workBook = XLSX.utils.table_to_book(
        this.$refs.xTable.$el.querySelector(".body--wrapper>.vxe-table--body")
      );
      XLSX.writeFile(workBook, "外特性曲线.xlsx");
    },
    exportXtable1() {
      const workBook = XLSX.utils.table_to_book(
        this.$refs.xTable1.$el.querySelector(".body--wrapper>.vxe-table--body")
      );
      XLSX.writeFile(workBook, "倒拖特性曲线.xlsx");
    },

    /*

      engineThousandModel: {
        speed: null,
        torque: null,
        throat: null,
        bsfc: null,
        massFlowRate: null
      },
      engineThousandTableData: [],

*/

    saveEngineThousand() {
      // 数据验证
      if (
        !(
          this.engineThousandTableData &&
          this.engineThousandTableData.length > 0
        )
      ) {
        this.$Message.warning("没有可保存的数据！");
        return;
      }

      const speed = this.engineThousandTableData.map(item => item.speed);
      const torque = this.engineThousandTableData.map(item => item.torque);
      const throat = this.engineThousandTableData.map(item => item.throat);
      const bsfc = this.engineThousandTableData.map(item => item.bsfc);
      const massFlowRate = this.engineThousandTableData.map(
        item => item.massFlowRate
      );

      const param = {
        speed: JSON.stringify(speed),
        torque: JSON.stringify(torque),
        throat: JSON.stringify(throat),
        bsfc: JSON.stringify(bsfc),
        massFlowRate: JSON.stringify(massFlowRate),
        tableData: JSON.stringify(this.engineThousandTableData)
      };
      engineThousandApi.addEngineThousand(param).then(res => {
        this.$Message.warning("保存成功");
      });
    },

    // todo 渲染万有曲线
    renderEngineThousandTableDataEchart() {
      const option = {
        title: {
          text: "万有特性曲线"
        },
        tooltip: {
          trigger: "axis"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },

        xAxis: {
          name: "转速(km/h)",
          type: "category",
          boundaryGap: false,
          data: [0, 2000, 4000, 6000, 8000]
        },
        yAxis: {
          name: "油门(%)",
          type: "value"
        },
        series: [
          {
            name: "Union Ads",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: "Video Ads",
            type: "line",
            stack: "Total",
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: "Direct",
            type: "line",
            stack: "Total",
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: "Search Engine",
            type: "line",
            stack: "Total",
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };
      let myChart = this.echarts.init(document.getElementById("c"));
      myChart.setOption(option);
    },
    renderEngineThousandTableDataEchart1() {
      const speed = this.engineThousandTableData.map(item => item.speed);
      const torque = this.engineThousandTableData.map(item => item.torque);
      const throat = this.engineThousandTableData.map(item => item.throat);
      const bsfc = this.engineThousandTableData.map(item => item.bsfc);
      const massFlowRate = this.engineThousandTableData.map(
        item => item.massFlowRate
      );

      const option = {
        title: {
          text: "万有引力"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          x: "right",
          data: ["扭矩(Nm)", "功率", "油门(%)"],
          textStyle: {
            fontsize: 5
          }
        },
        grid: {
          left: "13%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          data: speed
        },
        yAxis: [
          {
            boundaryGap: [0, "50%"],
            axisLine: {
              lineStyle: {
                color: "#102b6a"
              },
              show: true
            },
            type: "value",
            name: "扭矩(Nm)",
            position: "left",
            offset: 130,
            // splitNumber:10,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#102b6a"
              }
            },
            splitLine: {
              show: false
            }
          },
          {
            boundaryGap: [0, "50%"],
            axisLine: {
              lineStyle: {
                color: "#d93a49"
              },
              show: true
            },
            splitLine: {
              show: false
            },
            offset: 70,
            type: "value",
            name: "功率",
            position: "left",
            axisLabel: {
              formatter: "{value} ",
              textStyle: {
                color: "#d93a49"
              }
            }
          },
          {
            boundaryGap: [0, "50%"],
            axisLine: {
              lineStyle: {
                color: "#7fb80e"
              },
              show: true
            },
            axisLabel: {
              formatter: "{value} ",
              textStyle: {
                color: "#7fb80e"
              }
            },
            splitLine: {
              show: false
            },
            type: "value",
            name: "油门(%)",
            offset: 10,
            position: "left",
            axisTick: {
              inside: "false",
              length: 10
            }
          }
        ],
        series: [
          {
            name: "扭矩(Nm)",
            type: "line",
            data: torque,
            yAxisIndex: 0,
            smooth: true
          },
          {
            name: "功率",
            type: "line",
            data: bsfc,
            yAxisIndex: 1,
            smooth: true
          },
          {
            name: "油门(%)",
            type: "line",
            data: throat,
            yAxisIndex: 2,
            smooth: true
          }
        ]
      };

      let myChart = this.echarts.init(document.getElementById("c"));
      myChart.setOption(option);
    },

    // 新增一条万有特性曲线
    engineThousandModelOk() {
      // 显示table数据
      this.externalCharacteristicModel[
        "index"
      ] = this.engineThousandTableData.length;
      this.engineThousandTableData.push(this.engineThousandModel);

      // 组合echart组件的数据动态并动态展示

      // 清空表单缓存数据
      this.engineThousandModel = {
        speed: null,
        torque: null,
        throat: null,
        power: null
      };
    },

    async delEngineThousandRow() {
      // console.log(this.$refs.xTable.getCheckedFilters())
      const { rows } = await this.$refs.xTable2.removeCheckboxRow();
      console.log(rows);
      if (rows && rows.length > 0) {
        const newArr = [];
        const tempar = rows.map(item => item.index);
        this.engineThousandTableData.forEach(item => {
          if (tempar.indexOf(item.index) == -1) {
            newArr.push(item);
          }
        });
        this.engineThousandTableData = newArr;
      } else {
        this.$Message.warning("没有可删除的数据！");
      }
    },

    // 新增万有引力事件
    addEngineThousandModelShow() {
      const $table = this.$refs.xTable2;
      const record = {
        speed: null,
        torque: null,
        throat: null,
        bsfc: null,
        massFlowRate: null,
        index: this.engineThousandTableData.length
      };
      this.engineThousandTableData.push(record);
      const { row: newRow } = $table.insertAt(record, -1);
      $table.setActiveCell(newRow, "speed");
    },

    getEngineExternalCharacteristicTable() {
      engineExternalCharacteristicApi.getByEngineId(this.id).then(res => {
        console.log("----->", res);
        const data = res.data;
        if (data) {
          // 组合table数据

          const tableData = JSON.parse(data.tableData);
          if (tableData && tableData.length > 0) {
            this.externalCharacteristicTableData = tableData;
          }

          this.renderExternalCharacteristicEchart();
        }
      });
    },

    // 倒拖特性曲线
    getRevseEngineExternalCharacteristicTable() {
      engineReverseApi.getByEngineId(this.id).then(res => {
        const data = res.data;
        if (data) {
          // 组合table数据
          this.externalReverseCharacteristicTableData = JSON.parse(
            data.tableData
          );
          this.renderReverseExternalCharacteristicEchart();
        }
      });
    },

    // 保存倒拖特性曲线
    reverseExternalCharacteristicSave() {
      // 数据验证
      if (
        !(
          this.externalReverseCharacteristicTableData &&
          this.externalReverseCharacteristicTableData.length > 0
        )
      ) {
        this.$Message.warning("没有可保存的数据！");
        return;
      }

      const speed = this.externalReverseCharacteristicTableData.map(
        item => item.speed
      );
      const torque = this.externalReverseCharacteristicTableData.map(
        item => item.torque
      );
      const throat = this.externalReverseCharacteristicTableData.map(
        item => item.throat
      );
      const power = this.externalReverseCharacteristicTableData.map(
        item => item.power
      );

      const param = {
        engineId: this.id,
        speed: JSON.stringify(speed),
        torque: JSON.stringify(torque),
        power: JSON.stringify(power),
        throat: JSON.stringify(throat),
        tableData: JSON.stringify(this.externalReverseCharacteristicTableData)
      };
      engineReverseApi.addEngineReverse(param).then(res => {
        this.$Message.warning("保存成功");
      });
    },

    // 保存外特性曲线
    engineExternalCharacteristicSave() {
      // 数据验证
      if (
        !(
          this.externalCharacteristicTableData &&
          this.externalCharacteristicTableData.length > 0
        )
      ) {
        this.$Message.warning("没有可保存的数据！");
        return;
      }

      const speed = this.externalCharacteristicTableData.map(
        item => item.speed
      );
      const torque = this.externalCharacteristicTableData.map(
        item => item.torque
      );
      const throat = this.externalCharacteristicTableData.map(
        item => item.throat
      );
      const power = this.externalCharacteristicTableData.map(
        item => item.power
      );

      const param = {
        engineId: this.id,
        speed: JSON.stringify(speed),
        torque: JSON.stringify(torque),
        power: JSON.stringify(power),
        throat: JSON.stringify(throat),
        tableData: JSON.stringify(this.externalCharacteristicTableData)
      };
      engineExternalCharacteristicApi
        .addEngineExternalCharacteristic(param)
        .then(res => {
          this.$Message.warning("保存成功");
        });
    },

    // 获取发动机详情数据
    fetchEnginDetail() {
      engineApi.getById(this.id).then(res => {
        this.engineDetail = res.data;
        this.engineDetail.createUser == this.$store.state.user.userLoginInfo.id
          ? (this.isUpdate = true)
          : (this.isUpdate = false);
      });
    },

    async delExternalRow() {
      // console.log(this.$refs.xTable.getCheckedFilters())
      const { rows } = await this.$refs.xTable.removeCheckboxRow();
      console.log(rows);
      if (rows && rows.length > 0) {
        const newArr = [];
        const tempar = rows.map(item => item.index);
        this.externalCharacteristicTableData.forEach(item => {
          if (tempar.indexOf(item.index) == -1) {
            newArr.push(item);
          }
        });
        this.externalCharacteristicTableData = newArr;
      } else {
        this.$Message.warning("没有可删除的数据！");
      }
    },
    // 新增外特性曲线-- 确定事件
    externalCharacteristicModelOk() {
      // 显示table数据
      this.externalCharacteristicModel[
        "index"
      ] = this.externalCharacteristicTableData.length;
      this.externalCharacteristicTableData.push(
        this.externalCharacteristicModel
      );

      // 组合echart组件的数据动态并动态展示

      // 清空表单缓存数据
      this.externalCharacteristicModel = {
        speed: null,
        torque: null,
        throat: null,
        power: null
      };
    },

    // 新增外特性曲线-- 保存事件
    externalCharacteristicModelSave() { },

    // 新增外特性曲线
    addExternalCharacteristicModelShow() {
      // this.externalCharacteristicModelShow = true;
      const $table = this.$refs.xTable;
      const record = {
        speed: null,
        torque: null,
        index: this.externalCharacteristicTableData.length
      };
      this.externalCharacteristicTableData.push(record);
      const { row: newRow } = $table.insertAt(record, -1);
      $table.setActiveCell(newRow, "sex");
    },

    // 渲染echart-- 外特性曲线
    renderExternalCharacteristicEchart() {
      const speed = this.externalCharacteristicTableData.map(
        item => item.speed
      );
      const torque = this.externalCharacteristicTableData.map(
        item => item.torque
      );
      const throat = this.externalCharacteristicTableData.map(
        item => item.throat
      );
      const power = this.externalCharacteristicTableData.map(
        item => item.power
      );
      const option = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["扭矩Nm"],
          bottom: "20"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "20%",
          containLabel: true
        },

        xAxis: {
          name: "发动机转速",
          nameLocation: "center",
          nameGap: 25,
          type: "category",
          boundaryGap: false,
          data: speed
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "扭矩Nm",
            type: "line",
            stack: "Total",
            data: torque,
            smooth: true
          }
        ]
      };

      let myChart = this.echarts.init(document.getElementById("a"));
      myChart.setOption(option);
    },

    reverseExternalCharacteristicTableChange(selection) {
      this.externalReverseCharacteristicTableSelection = selection;
    },

    async delReverseExternalRow() {
      const { rows } = await this.$refs.xTable1.removeCheckboxRow();
      if (rows && rows.length > 0) {
        const newArr = [];
        const tempar = rows.map(item => item.index);
        this.externalReverseCharacteristicTableData.forEach(item => {
          if (tempar.indexOf(item.index) == -1) {
            newArr.push(item);
          }
        });
        this.externalReverseCharacteristicTableData = newArr;
      } else {
        this.$Message.warning("没有可删除的数据！");
      }
    },
    // 新增外特性曲线-- 确定事件
    reverseExternalCharacteristicModelOk() {
      // 显示table数据
      this.externalReverseCharacteristicModel[
        "index"
      ] = this.externalReverseCharacteristicTableData.length;
      this.externalReverseCharacteristicTableData.push(
        this.externalReverseCharacteristicModel
      );

      // 组合echart组件的数据动态并动态展示

      // 清空表单缓存数据
      this.externalReverseCharacteristicModel = {
        speed: null,
        torque: null,
        throat: null,
        power: null
      };
    },

    // 新增外特性曲线-- 保存事件
    reverseExternalCharacteristicModelSave() { },

    // 新增外特性曲线
    addReverseExternalCharacteristicModelShow() {
      const $table = this.$refs.xTable1;
      const record = {
        speed: null,
        torque: null,
        index: this.externalReverseCharacteristicTableData.length
      };
      this.externalReverseCharacteristicTableData.push(record);
      const { row: newRow } = $table.insertAt(record, -1);
      $table.setActiveCell(newRow, "sex");
    },

    // 渲染echart-- 外特性曲线
    renderReverseExternalCharacteristicEchart() {
      const speed = this.externalReverseCharacteristicTableData.map(
        item => item.speed
      );
      const torque = this.externalReverseCharacteristicTableData.map(
        item => item.torque
      );
      const throat = this.externalReverseCharacteristicTableData.map(
        item => item.throat
      );
      const power = this.externalReverseCharacteristicTableData.map(
        item => item.power
      );
      const option = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["扭矩Nm"],
          bottom: "20"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "20%",
          containLabel: true
        },

        xAxis: {
          name: "发动机转速",
          nameLocation: "center",
          nameGap: 25,
          type: "category",
          boundaryGap: false,
          data: speed
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "扭矩Nm",
            type: "line",
            stack: "Total",
            smooth: true,
            data: torque
          }
        ]
      };

      let myChart = this.echarts.init(document.getElementById("b"));
      myChart.setOption(option);
    },

    init() {
      return;
      const option = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["扭矩Nm", "功率kW", "油门%"],
          bottom: "20"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "20%",
          containLabel: true
        },

        xAxis: {
          name: "发动机转速",
          nameLocation: "center",
          nameGap: 25,
          type: "category",
          boundaryGap: false,
          data: ["1000", "1200", "1400", "1600", "1800", "2000", "2200"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "扭矩Nm",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "功率kW",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: "油门%",
            type: "line",
            stack: "Total",
            data: [150, 232, 201, 154, 190, 330, 410]
          }
        ]
      };
      let myChart = this.echarts.init(document.getElementById("a"));
      myChart.setOption(option);

      let myChart1 = this.echarts.init(document.getElementById("b"));
      myChart1.setOption(option);
    }
  }
};
</script>
<style>
#cont {
  background-color: #fff;
  padding: 30px 30px 0 30px;
}

.tb-row1 {
  border: 1px solid #eee;
}

.tb-row1>div {
  border-right: 1px solid #eee;
  height: 44px;
  line-height: 44px;
  font-size: 16px;
  padding-left: 10px;
}

.tb-row1>div:first-child {
  color: #666;
  background: #f5f5f5;
  text-align: center;
  font-weight: bold;
}

.tb-row1>div:nth-child(3) {
  color: #666;
  background: #f5f5f5;
  text-align: left;
  font-weight: bold;
  text-align: center;
}

.tb-row1>div:last-child {
  border-right: 0;
}

.form-ex {
  margin-bottom: 20px;
}

.form-ex>div {
  width: 100px;
  display: inline;
}

.tab-detail {
  margin-bottom: 50px;
}

.tab-detail input {
  background-color: #f4f4f4 !important;
}

.tab-detail span {
  color: #000 !important;
}

.tab-detail i {
  display: none !important;
}

.detail-image-box {
  width: 100%;
  margin-bottom: 34px;
  height: 230px;
  border: 1px dashed #dcdee2;
  text-align: center;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
}
</style>
